<template>
  <div class="medical-report-container">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>体检报告管理</span>
        <!-- 添加搜索输入框 -->
        <el-input
          v-model="searchKeyword"
          placeholder="请输入关键词搜索"
          style="width: 200px; margin-left: 20px"
          @keyup.enter.native="handleSearch"
        >
          <el-button slot="append" icon="el-icon-search" @click="handleSearch"></el-button>
        </el-input>
        <!-- 添加批量删除按钮 -->
        <el-button 
          style="margin-left: 10px; padding: 8px 16px; border-radius: 4px;" 
          type="danger"
          @click="handleBatchDelete"
        >
          批量删除
        </el-button>
        <el-button 
          style="float: right; padding: 3px 0" 
          type="text"
          @click="refreshList"
        >
          刷新
        </el-button>
      </div>
      
      <el-table
        :data="reportList"
        border
        style="width: 100%"
        v-loading="loading"
        ref="multipleTable"
      >
        <!-- 添加多选框列 -->
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column
          prop="id"
          label="报告ID"
          width="100"
        />
        <el-table-column
          prop="userName"
          label="用户姓名"
          width="120"
        />
        <el-table-column
          prop="reportType"
          label="报告类型"
          width="150"
        />
        <el-table-column
          prop="uploadTime"
          label="上传时间"
          width="180"
        />
  
     
        <el-table-column
          label="操作"
          width="180"
        >
          <template slot-scope="scope">
            <el-button
              size="mini"
              @click="handleView(scope.row)"
            >查看</el-button>
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.row)"
            >删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      
      <el-pagination
        class="pagination"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[10, 20, 30, 50]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      />
    </el-card>
  </div>
</template>

<script>
export default {
  name: 'MedicalReportManagement',
  data() {
    return {
      reportList: [],
      loading: false,
      currentPage: 1,
      pageSize: 10,
      total: 0,
      // 新增搜索关键词
      searchKeyword: '' 
    }
  },
  created() {
    this.getReportList()
  },
  methods: {
    getReportList() {
      this.loading = true
      // 这里应该是API请求，暂时用模拟数据
      setTimeout(() => {
        const allData = [
          {
            id: '1001',
            userName: '张三',
            reportType: '血常规检查',
            uploadTime: '2023-05-10 14:30:22',
            status: '已审核'
          },
          {
            id: '1002',
            userName: '李四',
            reportType: '肝功能检查',
            uploadTime: '2023-05-11 09:15:33',
            status: '待审核'
          },
          {
            id: '1003',
            userName: '王五',
            reportType: '肾功能检查',
            uploadTime: '2023-05-12 15:45:00',
            status: '已拒绝'
          }
        ]
        // 实现搜索逻辑
        if (this.searchKeyword) {
          this.reportList = allData.filter(item => 
            Object.values(item).some(value => 
              String(value).includes(this.searchKeyword)
            )
          )
        } else {
          this.reportList = allData
        }
        this.total = this.reportList.length
        this.loading = false
      }, 500)
    },
    // 由于状态列已删除，此方法暂时无用，可以考虑删除
    getStatusTagType(status) {
      const statusMap = {
        '已审核': 'success',
        '待审核': 'warning',
        '已拒绝': 'danger'
      }
      return statusMap[status] || ''
    },
    handleView(row) {
      this.$message.info(`查看报告 ${row.id}`)
      // 这里应该跳转到报告详情页或打开预览
    },
    handleDelete(row) {
      this.$confirm(`确定要删除报告 ${row.id} 吗?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 实际删除逻辑
        this.reportList = this.reportList.filter(item => item.id !== row.id)
        this.total -= 1
        this.$message.success('删除成功')
      }).catch(() => {
        this.$message.info('已取消删除')
      })
    },
    refreshList() {
      this.currentPage = 1
      this.searchKeyword = ''
      this.getReportList()
    },
    handleSizeChange(val) {
      this.pageSize = val
      this.getReportList()
    },
    handleCurrentChange(val) {
      this.currentPage = val
      this.getReportList()
    },
    // 处理搜索
    handleSearch() {
      this.currentPage = 1
      this.getReportList()
    },
    // 处理批量删除
    handleBatchDelete() {
      const selectedRows = this.$refs.multipleTable.selection
      if (selectedRows.length === 0) {
        this.$message.warning('请选择要删除的报告')
        return
      }
      this.$confirm('确定要删除选中的报告吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const idsToDelete = selectedRows.map(row => row.id)
        this.reportList = this.reportList.filter(item => !idsToDelete.includes(item.id))
        this.total = this.reportList.length
        this.$message.success('批量删除成功')
      }).catch(() => {
        this.$message.info('已取消批量删除')
      })
    }
  }
}
</script>

<style scoped>
.medical-report-container {
  padding: 20px;
}
.pagination {
  margin-top: 20px;
  text-align: right;
}
</style>